<template>
    <div class="shop-box">
        <!-- content -->
        <div class="shop-right">
            <div class="shop-preview white-box" v-if="route_paths === '/Shop/ShopDeco'">
                <div class="task-one">
                    <div class="task-one__item">
                        <span class="task-one__label">页面名称：</span>
                        <el-input placeholder="输入页面名称搜索" v-model.trim="search_text" clearable></el-input>
                    </div>
                    <div class="task-one__btn clearfix">
                        <el-button type="primary" :loading="search_btn" :icon="Search" @click="handleSearch">搜索</el-button>
                    </div>
                </div>
                <div class="table-mb">
                    <el-button type="primary" @click="addPage">新建页面</el-button>
                </div>
                <el-table
                    class="table-mb"
                    v-loading="loading"
                    :data="arr_data"
                    :header-cell-style="{ background: '#F5F7FA' }"
                    element-loading-background="rgba(255, 255, 255, 0.6)"
                >
                    <el-table-column prop="decorate_id" label="ID" />
                    <el-table-column prop="title" label="页面名称" />
                    <el-table-column prop="created_at_label" label="最后保存时间"></el-table-column>
                    <el-table-column label="操作" width="340" class-name="operation-nav" fixed="right">
                        <template #default="scope">
                            <el-button class="theme-btn" type="primary" link @click="clickEdit(scope.row)">编辑</el-button>
                            <!-- <el-button class="theme-btn" type="primary" link @click="clickRelease(scope.row)">发布</el-button> -->
                            <el-popconfirm title="是否确定删除？" confirm-button-text="确定" cancel-button-text="取消" @confirm="clickDel(scope.row)" v-if="scope.row.decorate_id > 1">
                                <template #reference>
                                    <el-button class="theme-btn" link type="primary">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <el-pagination
                    background
                    v-model:current-page="page"
                    v-model:page-size="pageSize"
                    :page-sizes="pageSizeNum"
                    :total="totalNums"
                    layout="total, sizes, prev, pager, next, jumper"
                >
                </el-pagination>
            </div>

            <!-- other -->
            <el-config-provider :locale="locale">
                <router-view v-slot="{ Component }">
                    <keep-alive :include="includeList">
                        <component :is="Component"></component>
                    </keep-alive>
                </router-view>
            </el-config-provider>
        </div>
    </div>
</template>

<script setup>
import { getCurrentInstance, ref, computed, onMounted, watch } from "vue"
import { useRouter, useRoute } from "vue-router"
import { useBaseStore } from "@store/base"
import { Search } from "@element-plus/icons-vue"
import OneLoad from "@mixins/one-load"
import zhCn from "element-plus/lib/locale/lang/zh-cn"

const storeBase = useBaseStore()
const router = useRouter()
const route = useRoute()
const { proxy } = getCurrentInstance()

const includeList = computed(() => {
    return storeBase.includeList
})

const locale = ref(null)
locale.value = zhCn

const route_paths = ref("")
watch(
    () => route.path,
    (val) => {
        route_paths.value = val
    },
    {
        immediate: true,
    }
)

onMounted(() => {
    getList()
})

/**
 * minxin列表加载
 */
const { page, pageSizeNum, pageSize, loading, arr_data, totalNums, search_btn, search_text, pubParams, pubRefreshParams, getdata } = OneLoad()
// 切换每页显示条数
watch(pageSize, (val) => {
    page.value = 1
    pubParams(getList)
})
// 跳转第几页
watch(page, (val) => {
    pubParams(getList)
})
const handleSearch = () => {
    search_btn.value = true
    pubRefreshParams(getList)
}
function getList() {
    let params = {
        page: page.value,
        limit: pageSize.value,
        so: search_text.value,
    }
    getdata("decorate/index", params)
}

// 编辑
const clickEdit = (row) => {
    router.push({
        path: "/Shop/Deco/DecoHome",
        query: {
            id: row.decorate_id,
        },
    })
}

// 发布-暂时不用
// const clickRelease = (row) => {

// }

// 删除
const clickDel = (row) => {
    proxy.$axios
        .post("decorate/delete", {
            decorate_id: row.decorate_id,
        })
        .then((res) => {
            if (res.data.code == 0) {
                pubParams(getList)
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}

const addPage = () => {
    router.push("/Shop/Deco/DecoHome")
}
</script>
<script>
export default {
    name: "ShopDeco",
}
</script>

<style lang="less" scoped>
.shop-box {
    display: flex;
    align-items: flex-start;
    border-radius: @radius-xs;

    .shop-right {
        flex: 1;
        display: flex;
        align-items: flex-start;
        min-height: calc(100vh - 120px);
        .shop-preview {
            flex: 1;
            background-color: #fff;
            position: relative;
            flex-direction: column;
            background-color: #fff;
            height: 100%;
        }
    }
}
</style>